<template>
  <div class="tabMnagementWrap">
    <h3>
      <span
        v-if="$route.params.type == '2' && $route.params.status"
      >标签管理/</span>
      <span
        v-else-if="$route.params.type == '1' && $route.params.status"
      >分类管理/</span>
      <span
        v-if="$route.params.type == '2' && $route.params.status == true"
      >新增标签</span>
      <span
        v-else-if="$route.params.type == '1' && $route.params.status == true"
      >新增分类</span>
      <span
        v-else-if="$route.params.type == '2' && $route.params.status == false"
      >编辑标签</span>
      <span
        v-else-if="$route.params.type == '1' && $route.params.status == false"
      >编辑分类</span>
    </h3>
    <el-form ref="forms" :model="BindForm" :rules="pattren">
      <div v-if="$route.params.type == '1'" class="ele-title">
        <span>填写分类信息</span>
      </div>
      <el-form-item v-if="$route.params.type == '1'" label="分类名称" required>
        <el-col :span="5">
          <el-form-item prop="name">
            <div class="top">
              <el-input v-model="BindForm.name" maxlength="10" />
            </div>
          </el-form-item>
          <div v-for="(item, i) in BindForm.children" :key="i" class="bottom">
            <el-form-item
              :prop="'children.' + i + '.name'"
              :rules="[
                {
                  required: true,
                  message: '请输入',
                  trigger: 'blur'
                },
                {
                  max: 10,
                  message: '超过限定字符10',
                  trigger: 'change'
                }
              ]"
            >
              <el-input v-model="item.name" maxlength="10" />
              <el-button
                v-if="BindForm.children.length > 1"
                type="text"
                style="color:red"
                class="ele-remove"
                @click="BindForm.children.splice(i, 1)"
              >删除</el-button>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="15">
          <el-button
            type="text"
            style="margin-left:20px"
            :disabled="BindForm.children.length == 20"
            @click="addtowTitle"
          >添加二级标签</el-button>
        </el-col>
      </el-form-item>
      <div v-if="$route.params.type == '2'" class="ele-title">
        <span>填写标签信息</span>
      </div>
      <el-form-item v-if="$route.params.type == '2'" label="标签名称" required>
        <el-col :span="20">
          <div v-for="(item, index) in BindForm.labelName" :key="index">
            <el-form-item
              class="labelName"
              :prop="'labelName.' + index + '.value'"
              :rules="[
                {
                  required: true,
                  message: '标签名不能为空',
                  trigger: 'blur'
                },
                {
                  max: 6,
                  message: '输入超过六个字符',
                  trigger: 'change'
                }
              ]"
            >
              <el-input
                v-model="item.value"
                minlength="1"
                maxlength="20"
                class="ele-input"
              />
              <el-button
                v-if="BindForm.labelName.length > 1"
                type="text"
                style="color:red"
                class="ele-remove"
                @click="BindForm.labelName.splice(index, 1)"
              >删除</el-button>
            </el-form-item>
          </div>
        </el-col>
      </el-form-item>
      <el-form-item v-if="$route.params.type == '2'" label="突出标签" prop="prominent">
        <el-col :span="20">
          <el-switch
            v-model="BindForm.prominent"
          />
        </el-col>
      </el-form-item>
      <div style="margin-left:80px">
        <el-button
          v-if="$route.params.status && $route.params.type == '2'"
          type="text"
          :disabled="BindForm.labelName.length == 20"
          @click="handelAddlabel"
        >新增标签</el-button>
      </div>
      <div class="ele-title">
        <span>其他设置:</span>
      </div>
      <el-form-item label="商品顺序:">
        <el-col :span="20">
          <div>
            <el-radio
              v-model="BindForm.ChronologicalOrder"
              label="0"
            >按添加时间正序</el-radio>
            <p v-if="$route.params.type == '2'" class="introduce">
              按标签显示时，按照该标签下商品添加时间正序。
            </p>
            <p v-if="$route.params.type == '1'" class="introduce">
              按分类筛选时，按照该分类下商品添加时间正序。
            </p>
          </div>
          <div>
            <el-radio
              v-model="BindForm.ChronologicalOrder"
              label="1"
            >按添加时间倒序</el-radio>
            <p v-if="$route.params.type == '2'" class="introduce">
              按标签显示时，按照该标签下商品添加时间倒序。
            </p>
            <p v-if="$route.params.type == '1'" class="introduce">
              按分类筛选时，按照该分类下商品添加时间倒序。
            </p>
          </div>
          <div>
            <el-radio
              v-model="BindForm.ChronologicalOrder"
              label="2"
            >按销量排序</el-radio>
            <p v-if="$route.params.type == '2'" class="introduce">
              按标签显示时，按照该标签下商品销售量从高到低排序。
            </p>
            <p v-if="$route.params.type == '1'" class="introduce">
              按分类筛选时，按照该分类下商品销售量从高到低排序。
            </p>
          </div>
        </el-col>
      </el-form-item>
      <el-form-item class="footer">
        <el-button
          type="primary"
          :loading="butLoading"
          @click="submit(BindForm, $route.params.type)"
        >提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  CommodityClassificationAdd,
  getSecond,
  CommodityClassificationEdit,
  productLabelAdd,
  productLabelEdit
} from '@/api/customAPI/shop/CommodityClassification'
export default {
  name: 'TabManagement',
  data() {
    var cusLabelName = (rule, value, callback) => {
      let isTure = false
      let tsTure = false
      if (value.length > 0) {
        value.forEach(inf => {
          if (inf.value === '') {
            isTure = true
          } else {
            if (inf.value.toString().length > 6) {
              tsTure = true
            }
          }
        })
      }
      if (tsTure) {
        rule.message = '输入超过六个字符'
        callback(new Error())
      } else if (isTure) {
        rule.message = '请填写标签名!'
        callback(new Error())
      } else {
        callback()
      }
    }
    return {
      butLoading: false,
      BindForm: {
        ChronologicalOrder: '0',
        name: '',
        children: [],
        labelName: [{ value: '' }],
        prominent: false
      },
      pattren: {
        children: [
          {
            type: 'Array',
            required: true,
            message: '请输入',
            trigger: 'blur'
          }
        ],
        name: [
          {
            required: true,
            message: '请输入',
            trigger: 'blur'
          }
        ],
        labelName: [
          {
            required: true,
            validator: cusLabelName,
            message: '请输入标签名',
            trigger: 'blur'
          }
        ],
        prominent: [
          {
            required: true,
            message: '请选择突出标签类型',
            trigger: ['blur', 'change']
          }
        ]
      }
    }
  },
  mounted() {
    this.loadding()
  },
  activated() {
    this.loadding()
    this.BindForm.children.push({
      name: ''
    })
  },
  methods: {
    handelAddlabel() {
      this.BindForm.labelName.push({
        value: ''
      })
    },
    loadding() {
      const list = []
      if (this.$route.params.row) {
        if (this.$route.params.type === '1') {
          if (this.$route.params.status === false) {
            getSecond({ id: this.$route.params.row.id }).then(inf => {
              inf.data.data.forEach(res => {
                list.push({ name: res.name, id: res.id }) // 二级
              })
              this.BindForm.children = list
              this.BindForm.name = this.$route.params.row.name
              this.BindForm.id = this.$route.params.row.id // 一级id
              this.BindForm.ChronologicalOrder = this.$route.params.row.showSort.toString()
            })
          }
        } else if (this.$route.params.type === '2') {
          this.BindForm.id = this.$route.params.row.id
          this.BindForm.labelName = [{ value: this.$route.params.row.name }]
          this.BindForm.prominent = this.$route.params.row.prominent != 0
          this.BindForm.ChronologicalOrder = this.$route.params.row.showSort.toString()
        }
      } else {
        this.BindForm.ChronologicalOrder = '0'
        this.BindForm.name = null
        this.BindForm.children = []
        this.BindForm.labelName = [{ value: '' }]
        this.BindForm.prominent = false
      }
    },
    /** 提交 */
    submit(data, idex) {
      const list = []
      this.butLoading = true
      this.$refs.forms.validate(v => {
        if (v) {
          switch (idex) {
            case '1':
              if (this.$route.params.status) {
                for (const iterator of data.children) {
                  list.push(iterator.name.toString())
                }
                // 添加
                CommodityClassificationAdd({
                  name: data.name,
                  children: list,
                  chronologicalOrder: data.ChronologicalOrder
                })
                  .then(() => {
                    this.$message.success('添加成功。')
                    this.$router.go(-1)
                    this.butLoading = false
                  })
                  .catch(() => {
                    this.butLoading = false
                  })
              } else {
                // 编辑
                this.BindForm.children.forEach(inf => {
                  list.push(inf.name)
                })
                CommodityClassificationEdit({
                  id: this.BindForm.id,
                  name: this.BindForm.name,
                  children: list,
                  chronologicalOrder: this.BindForm.ChronologicalOrder
                })
                  .then(inf => {
                    this.butLoading = false
                    this.$message.success('编辑成功')
                    this.$store.dispatch('tagsView/delView', this.$route)
                    this.$router.go(-1)
                  })
                  .catch(() => {
                    this.butLoading = false
                  })
              }
              break
            case '2':
              if (this.$route.params.status) {
                this.BindForm.labelName.forEach(inf => {
                  list.push(inf.value)
                })
                // 添加
                var param = {
                  shopId: localStorage.getItem('shopId'),
                  labelName: list,
                  commodityOrder: this.BindForm.ChronologicalOrder,
                  prominent: this.BindForm.prominent ? 1 : 0
                }
                productLabelAdd(param)
                  .then(() => {
                    this.$message.success('成功')
                    this.butLoading = false
                    this.$store.dispatch('tagsView/delView', this.$route)
                    this.$router.go(-1)
                  })
                  .catch(() => {
                    this.butLoading = false
                  })
              } else {
                this.BindForm.labelName.forEach(inf => {
                  list.push(inf.value)
                })
                // 编辑
                productLabelEdit({
                  labelID: this.$route.params.row.id,
                  labelName: list.toString(),
                  commodityOrder: this.BindForm.ChronologicalOrder,
                  prominent: this.BindForm.prominent ? 1 : 0
                })
                  .then(result => {
                    this.$message.success('成功')
                    this.butLoading = false
                    this.$store.dispatch('tagsView/delView', this.$route)
                    this.$router.go(-1)
                  })
                  .catch(() => {
                    this.butLoading = false
                  })
              }
              break
          }
        } else {
          this.butLoading = false
        }
      })
    },
    /** 添加二分类 */
    addtowTitle() {
      this.BindForm.children.push({
        name: ''
      })
    },
    handleNodeClick() {
      // this.BindForm.labelName= this.$route.params.row
    }
  },
  beforeRouteEnter(to, from, next) {
    // ...
    if (to.params.type === '1' && to.params.status === true) {
      to.meta.title = '新增分类'
    } else if (to.params.type === '2' && to.params.status === true) {
      to.meta.title = '新增标签'
    } else if (to.params.type === '2' && to.params.status === false) {
      to.meta.title = '编辑标签'
    } else {
      to.meta.title = '编辑分类'
    }
    next()
  },
  beforeRouteLeave(to, from, next) {
    // ....
    this.$store.dispatch('tagsView/delView', from)
    next()
  }
}
</script>
<style lang="scss" scoped>
.tabMnagementWrap {
  padding: 50px 100px;
  ::v-deep.el-form {
    .el-form-item__label {
      width: 80px;
      text-align: start;
    }
    .labelName {
      .el-form-item__error {
        margin-top: -20px;
      }
    }

    .el-form-item {
      .ele-input {
        width: 300px;
        margin-bottom: 20px;
      }
      .top {
        .el-input {
          z-index: 1000;
        }
      }
      .bottom {
        padding-left: 60px;
        position: relative;
        .ele-remove {
          position: absolute;
          right: -50px;
          top: 10px;
        }
        .el-input {
          margin-top: 20px;
          position: relative;
        }
        .el-input::before {
          content: '';
          display: inline-block;
          width: 20px;
          background: #b8b8b8;
          height: 1px;
          position: absolute;
          left: -20px;
          top: 18px;
        }
        .el-input::after {
          content: '';
          display: inline-block;
          width: 1px;
          background: #b8b8b8;
          height: 60px;
          position: absolute;
          left: -20px;
          top: -42px;
        }
      }
    }

    .introduce {
      margin-top: 0px;
      padding-left: 25px;
      color: #aaaaaa;
    }
  }
  .footer {
    margin-top: 50px;
    .el-button {
      width: 200px;
      margin-left: 40%;
    }
  }
  .ele-title {
    width: 100%;
    height: 50px;
    border-radius: 5px;
    line-height: 50px;
    padding-left: 20px;
    background: #f3f3f3;
    margin: 30px 0px;
  }
}
</style>
